<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./base.css">
    <style>
        /*初始页面样式*/
        .init {
            & .button {
                background-color: #4662d9;
                width: 50px;
                position: fixed;
                right: 100px;
                top: 50px;
                text-align: center;
                border-radius: 5px;
                color: #fff;
                cursor: pointer;
                user-select: none;
                font-size: 14px;
                height: 25px;
                line-height: 25px;
            }
        }

        /*页面阴影部分*/
        .boxShadow {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: #7f7f7f;
            opacity: 0.5;
        }

        /*登陆页面*/
        .box {
            padding-top: 30px;
            width: 750px;
            height: 400px;
            border-radius: 20px;
            display: flex;
            justify-content: center;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);

            & .rightBox {
                text-align: center;

                & .inp {
                    width: 335px;
                    height: 45px;
                    border-radius: 10px;
                    outline: none;
                    display: flex;
                    line-height: 35px;
                    border: 1px solid rgb(192, 196, 204, .7);
                    font-size: 14px;
                    margin-bottom: 10px;
                }

                & .text {
                    margin-top: 13px;

                    & a {
                        color: #46a3f7;
                    }
                }

                & .title1 {
                    width: 75px;
                    padding-bottom: 6px;
                    border-bottom: 2px solid #4662d9;
                    text-align: center;
                    margin-bottom: 20px;
                    margin-top: 20px;

                }

                & .title2 {
                    width: 340px;
                    height: 50px;
                    background-color: #b5c0f0;
                    border-radius: 10px;
                    text-align: center;
                    line-height: 50px;
                    cursor: pointer;
                    color: white;
                    opacity: 0.8;
                    user-select: none;
                    margin-top: 30px;
                    box-shadow: 0 0 10px 1px #b5c0f0;
                }

                & .checked2 {
                    margin-right: 140px;
                    user-select: none;
                }

                & .title2:hover {
                    opacity: 1;

                }
            }

            & .bottom {
                position: absolute;
                bottom: 0;
                display: flex;
                justify-content: space-between;
                width: 90%;
                height: 45px;
                line-height: 35px;
                border-top: 1px solid rgba(0, 0, 0, .3);
                padding-top: 7px;
                user-select: none;

                & .reg {
                    cursor: pointer;
                    color: #46a3f7;
                }
            }

            & .delete {
                position: absolute;
                top: 10px;
                right: 15px;
                cursor: pointer;
            }
        }

        /*注册页面样式*/
        .regBox {
            background-color: white;
            width: 400px;
            height: 300px;
            border: 1px solid;
            z-index: 2;
            border-radius: 15px;
            display: flex;
            flex-flow: column;
            justify-content: center;
            text-align: center;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);

            & .regBoxs {
                width: 280px;
                height: 45px;
                border-radius: 20px;
                outline: none;
                display: flex;
                line-height: 35px;
                border: 1px solid rgb(192, 196, 204, .7);
                font-size: 14px;
                margin-bottom: 10px;
            }

            & ul {
                display: flex;
                flex-flow: column;
                align-items: center;

            }

            & ul li {
                display: flex;
                line-height: 45px;
            }

            & ul li h3 {
                width: 280px;
                border-radius: 20px;
                margin-left: 36px;
                user-select: none;
                cursor: pointer;
                border: 1px solid rgb(192, 196, 204, .7);
            }

            & > h3 {
                position: absolute;
                top: 10px;
                right: 15px;
                cursor: pointer;
            }

            & > h2 {
                user-select: none;
                margin-bottom: 20px;
            }
        }

        .on {
            display: none !important;
        }

        .init .logintr {
            position: absolute;
            right: 50px;
            top: 50px;
            display: flex;

            & > p {
                width: 100px;
                cursor: pointer;
                color: #4662d9;
                margin-left: 20px;
                font-weight: bold;

            }

        }
    </style>
</head>

<body>
<!--初始页面样式-->
<div class="init">
    <img src="百度页面.jpg">
    <div class="button">登录</div>
    <div class="logintr on">
        <h4></h4>
        <p>重新登录</p>
    </div>
</div>

<!--页面阴影部分-->
<div class="boxShadow on"></div>
<!--登陆页面-->
<div class="box on">
    <h2 class="delete">X</h2>
    <div>
        <img src="loginl.png" width="340">
    </div>
    <div class="rightBox">
        <h3 class="title1">账号登录</h3>
        <input class="inp inp1" placeholder="手机号/用户名/邮箱">
        <input class="inp inp2" placeholder="密码">
        <p class="checked2">
            <label> <input type="checkbox" class="rememberPassword">记住密码</label>
            <label> <input type="checkbox" class="autoLogin">自动登录</label>
        </p>
        <h3 class="title2">登录</h3>
        <p class="text">
            <input class="flag" type="checkbox">阅读并接受<a
                href="https://passport.baidu.com/static/passpc-account/html/protocal.html"
                target="_blank">百度用户协议</a>和<a href="https://privacy.baidu.com/policy"
                                                     target="_blank">隐私政策</a>
        </p>
    </div>
    <div class="bottom">
        <img src="百度登录2.png">
        <p class="reg">立即注册</p>
    </div>


</div>
<!--注册页面  -->
<div class="regBox on">
    <h2>注册</h2>
    <h3>X</h3>
    <ul>
        <li>账号:<input class="regBoxs regBoxs1"></li>
        <li>密码:<input class="regBoxs regBoxs2"></li>
        <li>
            <h3>确认</h3>
        </li>
    </ul>
</div>

<script type="text/javascript">
    let loginInitButton = document.querySelector('.init .button')//初始界面的登录按钮
    let oBox = document.querySelector('.box')//登录界面
    let boxShadow = document.querySelector('.boxShadow')//阴影部分
    let reg = document.querySelector('.box .bottom .reg')//注册按钮
    let regBox = document.querySelector('.regBox')//注册界面
    let oBoxDelete = document.querySelector('.box .delete')//登录界面的关闭按钮
    let regBoxDelete = document.querySelector('.regBox h3')//注册界面的关闭按钮
    let oReg1 = document.querySelector('.regBox .regBoxs1')//注册界面的第1个input框
    let oReg2 = document.querySelector('.regBox .regBoxs2')//注册界面的第2个input框
    let confirmReg = document.querySelector('.regBox ul li h3')//注册界面的确认按钮
    let flag = document.querySelector('.box .rightBox .text .flag')//勾选协议复选框
    let login = document.querySelector('.box .rightBox .title2')//登录界面的登录按钮
    let logintr = document.querySelector('.init .logintr')//重新登陆显示界面
    let loginAgainButton = document.querySelector('.init .logintr>p')//重新登陆按钮
    let inp1 = document.querySelector('.box .rightBox .inp1')//登陆界面的第1个input框
    let inp2 = document.querySelector('.box .rightBox .inp2')//登陆界面的第2个input框
    let userChange = document.querySelector('.init .logintr>h4')//登录成功后初始界面显示的账户名信息
    let rememberPassword = document.querySelector('.box .rightBox .checked2 .rememberPassword')//记住密码
    let autoLogin = document.querySelector('.box .rightBox .checked2 .autoLogin')//自动登录
    let Cookie = {
        setItem(key, value, expires) {
            let date = expires ? new Date(Date.now() + expires * 1000 * 60 * 60 * 24 - 8 * 60 * 60 * 1000) : null
            document.cookie = `${key}=${value};expires=` + date
        },
        getItem(key) {
            return this.getAll()[key]
        },
        removeItem(key) {
            this.setItem(key, '', -1)
        },
        getAll() {
            let cook = document.cookie
            let arr = cook.split('; ')
            let obj = {}
            for (let i = 0; i < arr.length; i++) {
                let newArr = arr[i].split('=')
                obj[newArr[0]] = newArr[1]
            }
            return obj
        },
        clear() {
            let obj = this.getAll()
            for (let key in obj) {
                this.removeItem(key)
            }
        }
    }


    //登录按钮按钮随勾选协议变化颜色
    flag.onclick = function () {
        if (flag.checked) {
            login.style.backgroundColor = '#4662d9'
        } else {
            login.style.backgroundColor = '#b5c0f0'
        }
    }


    //注册按钮
    reg.addEventListener('click', () => {
        regBox.classList.remove('on')
    })
    //登录界面关闭按钮
    oBoxDelete.addEventListener('click', () => {
        boxShadow.classList.add('on')
        oBox.classList.add('on')
    })
    //注册界面的关闭按钮
    regBoxDelete.addEventListener('click', () => {
        regBox.classList.add('on')
        boxShadow.classList.remove('on')

    })


    //2.注册功能
    confirmReg.onclick = function () {
        let user = oReg1.value
        let pwd = oReg2.value
        if (pwd === '' || user === '') {
            alert('请输入账户和密码')
        } else if (Cookie.getItem(user)) {
            alert('该用户已存在')
        } else if (user !== '' && pwd !== '') {
            alert('注册成功')
            Cookie.setItem(user, pwd, 1)
            regBox.classList.add('on')
        }
    }


    //普通登录
    loginFunction(loginInitButton)
    //重新登录
    loginFunction(loginAgainButton)

    //点击登录函数
    function loginFunction(dom) {
        //点击的按钮
        dom.addEventListener('click', () => {
            boxShadow.classList.remove('on')
            oBox.classList.remove('on')
        })
    }

    //3.登录功能
    let isPwd, isAuto,use,pwd
    function loginFun(){

    }
    login.addEventListener('click', () => {

        //判断是否勾选
        if (flag.checked) {
            //判断账户是否存在
            if (Cookie.getItem(inp1.value)) {
                //存在的情况下密码是否相等
                if (Cookie.getItem(inp1.value) === inp2.value) {
                    //确定时获取框框值
                    isPwd = rememberPassword.checked
                    isAuto = autoLogin.checked
                    //点击记住密码或者自动登录后加一个cookie
                    Cookie.removeItem('记住密码')
                    Cookie.removeItem('自动登录')
                    use=inp1.value
                    pwd=inp2.value
                    Cookie.setItem('账号', use, 30)
                    Cookie.setItem('密码', pwd, 30)
                    if (isPwd)Cookie.setItem('记住密码', isPwd, 30)
                    if (isAuto)Cookie.setItem('自动登录', isAuto, 30)
                    alert('登录成功')
                    userChange.innerHTML = use + '已登录'
                    boxShadow.classList.add('on')
                    oBox.classList.add('on')
                    loginInitButton.classList.add('on')
                    logintr.classList.remove('on')
                } else {
                    alert('密码错误')
                }
            } else {
                alert('账号不存在')
            }
        } else {
            alert('请勾选“阅读并接受百度用户协议和隐私政策”')
        }
    })


    //记住密码
    if (Cookie.getItem('记住密码')) {
        inp1.value= Cookie.getItem('账号')
        inp2.value= Cookie.getItem('密码')
        rememberPassword.checked=true
    }
    //自动登录
    if (Cookie.getItem('自动登录')) {
        userChange.innerHTML = Cookie.getItem('账号') + '已登录'
        autoLogin.checked=true
        boxShadow.classList.add('on')
        oBox.classList.add('on')
        loginInitButton.classList.add('on')
        logintr.classList.remove('on')
    }


</script>
</body>

</html>